<template>
  <div>
    <v-layout :class="{'form-header':isActive}">
      <div class="form-title">Travel allowance request form</div>
      <div class="form-btns">
        <v-btn :class="{'print-btn':isActive}"
               depressed></v-btn>
        <v-btn :class="{'submit-btn':isActive}"
               depressed>Submit
        </v-btn>
        <v-btn depressed>Delete</v-btn>
      </div>
    </v-layout>
    <v-container class="grey lighten-5">
      <v-row justify="start">
        <v-col md="3" sm="12" cols="12"> <label>Request No:</label><strong >{{travelAllowance.requestNo}}</strong></v-col>
        <v-col md="3" sm="12" cols="12"> <label>Request Status:</label><span>{{travelAllowance.expStatus}}</span></v-col>
        <v-col md="3" sm="12" cols="12"> <label>Staff Name:</label><span>{{travelAllowance.claimantStaffName}}</span></v-col>
        <v-col md="3" sm="12" cols="12"> <label>Staff ID:</label><span>{{travelAllowance.claimantStaffName}}</span></v-col>
      </v-row>
      <v-row justify="start">
        <v-col md="3" sm="12" cols="12"> <label>Entity:</label><span>{{travelAllowance.claimantEntityCode}}</span></v-col>
        <v-col md="3" sm="12" cols="12"> <label>Grade:</label><span>{{travelAllowance.claimantStaffGrade}}</span></v-col>
        <v-col md="3" sm="12" cols="12"> <label>Line of service:</label><span>{{travelAllowance.lineOfService}}</span></v-col>
        <v-col md="3" sm="12" cols="12"> <label>Operating Unite:</label><span>{{travelAllowance.claimantOfficeCode}}</span></v-col>
      </v-row>
      <v-row justify="start">
        <v-col md="3" sm="12" cols="12"> <label>Office City:</label><span>{{travelAllowance.claimantOfficeCode}}</span></v-col>
        <v-col md="3" sm="12" cols="12"> <label>Local/Expatriate:</label><span>{{travelAllowance.localExpatriate == "N" ? "Local" : "Expatriate"}}</span></v-col>
        <v-col md="3" sm="12" cols="12"> <label>Line of service:</label><span>{{travelAllowance.lineOfService}}</span></v-col>
        <v-col md="3" sm="12" cols="12">  <label>Creation date (DD/MM/YYY):</label>
          <span>{{travelAllowance.creationDate | formattingDate}}</span></v-col>
      </v-row>
      <v-row justify="start">
        <v-col md="3" sm="12" cols="12">
          <div class="pending-form-info-block">

            <label>Request Type:</label>
            <v-select :items="territoryList"
                      item-text="Name"
                      item-value="Id"
                      solo></v-select>
          </div>
        </v-col>
        </v-row>
      <v-col md="3" sm="12" cols="12">
        <label>Client - job - office:</label>
        <input type="text"/>
      </v-col>
    </v-container>
<!--    <v-layout :class="{'form-info':isActive}">-->
<!--      <v-flex>-->
<!--        <label>Request No:</label>-->
<!--        <span>{{travelAllowance.requestNo}}</span>-->
<!--      </v-flex>-->
<!--      <v-flex>-->
<!--        <label>Request status:</label>-->
<!--        <span>{{travelAllowance.expStatus}}</span>-->
<!--      </v-flex>-->
<!--      <v-flex>-->
<!--        <label>Staff name:</label>-->
<!--        <span>{{travelAllowance.claimantStaffName}}</span>-->
<!--      </v-flex>-->
<!--      <v-flex>-->
<!--        <label>Staff ID:</label>-->
<!--        <span>{{travelAllowance.claimantStaffID}}</span>-->
<!--      </v-flex>-->
<!--      <v-flex>-->
<!--        <label>Entity:</label>-->
<!--        <span>{{travelAllowance.claimantEntityCode}}</span>-->
<!--      </v-flex>-->
<!--    </v-layout>-->
<!--    <v-layout :class="{'form-info':isActive}">-->
<!--      <v-flex>-->
<!--        <label>Grade:</label>-->
<!--        <span>{{travelAllowance.claimantStaffGrade}}</span>-->
<!--      </v-flex>-->
<!--      <v-flex>-->
<!--        <label>Line of service:</label>-->
<!--        <span>{{travelAllowance.lineOfService}}</span>-->
<!--      </v-flex>-->
<!--      <v-flex>-->
<!--        <label>Operating unite:</label>-->
<!--        <span>{{travelAllowance.claimantOfficeCode}}</span>-->
<!--      </v-flex>-->
<!--      <v-flex>-->
<!--        <label>Office city:</label>-->
<!--        <span>{{travelAllowance.claimantOfficeCode}}</span>-->
<!--      </v-flex>-->
<!--      <v-flex>-->
<!--        <label>Local/Expatriate:</label>-->
<!--        <span>{{travelAllowance.localExpatriate == "N" ? "Local" : "Expatriate"}}</span>-->
<!--      </v-flex>-->
<!--    </v-layout>-->
<!--    <v-layout :class="{'form-info':isActive}">-->

<!--      <v-flex>-->
<!--        <label>Creation date (DD/MM/YYY):</label>-->
<!--        <span>{{travelAllowance.creationDate | formattingDate}}</span>-->
<!--      </v-flex>-->
<!--      <v-flex>-->
<!--        <div class="pending-form-info-block">-->

<!--          <label>Request Type:</label>-->
<!--          <v-select :items="territoryList"-->
<!--                    item-text="Name"-->
<!--                    item-value="Id"-->
<!--                    solo></v-select>-->
<!--        </div>-->
<!--      </v-flex>-->
<!--      <v-flex style="width: 40%">-->
<!--        <label>Client - job - office:</label>-->
<!--        <input type="text"/>-->
<!--      </v-flex>-->
<!--      <v-flex>-->
<!--      </v-flex>-->
<!--    </v-layout>-->
    <v-layout :class="{'form-tabs':isActive}">
      <v-tabs>
        <v-tab>Travel details</v-tab>
        <v-tab>Attachment(s)</v-tab>
        <v-tab>Audit history</v-tab>
        <v-tab>Approver(s)</v-tab>
        <v-tab-item>
          <v-data-table :disable-sort="true"
                        :headers="headers"
                        :hide-default-footer='true'
                        :items="desserts"
                        :items-per-page="1000"
                        class="table form-table">
            <template v-slot:header.add="{ header }">
              <img @click="AddNewLine"
                   alt=""
                   src="../../assets/images/form-Add-btn.svg"
                   title=""/>
            </template>
            <template v-slot:item.add="{ item }">
              <img @click="DeleteLine(item)"
                   alt=""
                   class="cursor"
                   src="../../assets/images/form-minus-btn.svg"
                   title=""/>
            </template>
            <template v-slot:item.territory="props">
              <v-edit-dialog :return-value.sync="territory"
                             @close="close(props)">
                {{ props.item.territory }}
                <template v-slot:input>
                  <v-select :items="territoryList"
                            dense
                            item-text="Name"
                            item-value="Id"
                            v-model="props.item.territory"></v-select>
                </template>
              </v-edit-dialog>
            </template>
            <template v-slot:item.province="props">
              <div v-if="!props.item.readonlyProvince">N/A</div>
              <v-edit-dialog :return-value.sync="province" @close="close(props)"
                             v-else>
                {{ props.item.province }}
                <template v-slot:input>
                  <v-select
                    :items="provinceList"
                    dense
                    item-text="Name"
                    item-value="Id"
                    v-model="props.item.province"></v-select>
                </template>
              </v-edit-dialog>
            </template>
            <template v-slot:item.accomodationCity="props">
              <v-edit-dialog :return-value.sync="accomodationCity"
                             @close="close(props)">
                {{ props.item.accomodationCity }}
                <template v-slot:input>
                  <v-select :items="cityList"
                            dense
                            item-text="Name"
                            item-value="Id"
                            v-model="props.item.accomodationCity"></v-select>
                </template>
              </v-edit-dialog>
            </template>
            <template v-slot:item.hotelName="props">
              <v-edit-dialog :return-value.sync="hotelName"
                             @close="close(props)">
                {{ props.item.hotelName }}
                <template v-slot:input>
                  <v-text-field counter
                                label="Edit"
                                single-line
                                v-model="props.item.hotelName"></v-text-field>
                </template>
              </v-edit-dialog>
            </template>

            <template v-slot:item.checkInDate="props">
              <v-edit-dialog :return-value.sync="checkInDate"
                             @close="close(props)"
                             @open="open(props)">
                {{ props.item.checkInDate }}
                <template v-slot:input>
                  <v-date-picker color="orange lighten-5"
                                 v-model="props.item.checkInDate"></v-date-picker>
                </template>
              </v-edit-dialog>
            </template>
            <template @close="close(props)"
                      @open="open(props)"
                      v-slot:item.checkOutDate="props">
              <v-edit-dialog :return-value.sync="checkOutDate">
                {{ props.item.checkOutDate }}
                <template v-slot:input>
                  <v-date-picker color="orange lighten-5"
                                 v-model="props.item.checkOutDate"></v-date-picker>
                </template>
              </v-edit-dialog>
            </template>
          </v-data-table>
        </v-tab-item>
        <v-tab-item>
          <div class="attachment-btns">

            <v-btn :class="{'SelectFiles':isActive}"
                   @click="inputFile"
                   depressed><input @change="file"
                                    multiple
                                    ref="uploadFile"
                                    style="display:none"
                                    type="file">Select files
              <div>

              </div>

            </v-btn>
            <v-btn depressed>Upload</v-btn>
            <v-dialog v-model="dialog"
                      width="48%">
              <template v-slot:activator="{ on, attrs }">
                <v-btn depressed
                       v-bind="attrs"
                       v-on="on">My photo album
                </v-btn>
              </template>
              <v-card>
                <v-card-title class="headline grey lighten-5">
                  My Photo Album
                </v-card-title>

                <v-card-text>
                  <div class="receipts-selected-group">
                    <div class="receipts-selected">
                      <img alt=""
                           src="../../assets/images/receipts/c321829a-9038-4a18-8b40-94a71cacd829.jpg">
                      <div class="check-image">
                        <v-checkbox v-model="checkbox"></v-checkbox>
                        <p>c321829a-9038-4a18-8b40-94a71cacd829.jpg</p>
                      </div>
                    </div>
                    <div class="receipts-selected">
                      <img alt=""
                           src="../../assets/images/receipts/e5e0a877-ff46-448e-a589-4ef5a7ec862e.png">
                      <div class="check-image">
                        <v-checkbox v-model="checkbox"></v-checkbox>
                        <p>2.png</p>
                      </div>
                    </div>
                  </div>
                </v-card-text>
                <div class="btn-pagination">
                  <v-btn @click="dialog = false"
                         color="primary"
                         text>
                    Selected all
                  </v-btn>
                  <v-pagination :length="3"
                                v-model="page"></v-pagination>
                </div>
                <v-divider></v-divider>

                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn @click="dialog = false"
                         color="primary"
                         text>
                    Attach
                  </v-btn>
                  <v-btn @click="dialog = false"
                         color="primary"
                         text>
                    Delete
                  </v-btn>
                  <v-btn :class="{'image-close-btn':isActive}"
                         @click="dialog = false"
                         color="primary"
                         text>
                    Close
                  </v-btn>
                </v-card-actions>
              </v-card>
            </v-dialog>
            <v-dialog v-model="selectFileDialog"
                      width="48%">
              <v-card>
                <v-card-title class="headline grey lighten-5">
                  Select file type
                </v-card-title>
                <v-card-text>

                </v-card-text>

              </v-card>
            </v-dialog>
          </div>
          <v-expansion-panels>
            <v-expansion-panel :key="i"
                               v-for="(item,i) in 1">
              <v-expansion-panel-header>
                Note
              </v-expansion-panel-header>
              <v-expansion-panel-content>
                <ul>
                  <li>Please use full colour.</li>
                  <li>Please number the original Fapiao/receipts sequentially starting with 1. The number should be
                    inserted in the top left-hand corner. Sequence numbers here are corresponding to line numbers in the
                    electronic form.
                  </li>
                  <li>Please do not overlap Fapiao/receipts.</li>
                  <li>For expenses incurred in Mainland China and claimed under the Mainland China entities, the payee's
                    name on fapiaos must be the full Chinese name of your employment PwC entity.
                  </li>
                  <li>Any receipts/fapiaos aged over 90 days cannot be claimed.</li>
                  <li>For accommodation expenses, the hotel bill with expenses details must be provided.</li>
                  <li>The maximum size of an uploaded file is 10MB. Only jpg, bmp, gif, png and pdf files are allowed.
                  </li>
                </ul>
                <ul>
                  <li>请使用彩色扫描/彩色拍照功能。</li>
                  <li>请在发票/收据的原件的左上角从1开始顺序编号，发票或收据上的序号应该对应于电子报销单里的行号。</li>
                  <li>发票/收据不能相互遮挡、覆盖。</li>
                  <li>中国大陆员工报销在中国大陆发生的费用时，发票上的“付款单位”必须是您所在普华永道雇佣公司的中文全称。</li>
                  <li>超过90天以上的发票和收据不可以报销。</li>
                  <li>报销住宿费用，同时需要提供记录有费用明细的酒店水单。</li>
                  <li>上传文件不能大于10MB。系统只支持上传jpg, bmp, gif, png和pdf格式的文件。</li>
                </ul>
              </v-expansion-panel-content>
            </v-expansion-panel>
          </v-expansion-panels>
          <ul class="attachment-info">
            <li>
              <label>Hotel Receipt</label>
              <div class="receipts-selected-group">
                <div class="receipts-selected">
                  <img alt=""
                       src="../../assets/images/receipts/c321829a-9038-4a18-8b40-94a71cacd829.jpg">
                  <p>c321829a-9038-4a18-8b40-94a71cacd829.jpg</p>
                  <v-btn :class="{'delete-btn':isActive}"
                         depressed></v-btn>
                </div>
                <div class="receipts-selected">
                  <img alt=""
                       src="../../assets/images/receipts/e5e0a877-ff46-448e-a589-4ef5a7ec862e.png">
                  <p>2.png</p>
                  <v-btn :class="{'delete-btn':isActive}"
                         depressed></v-btn>
                </div>
              </div>
            </li>
            <li>Tickets or Boarding Pass</li>
            <li>Remarks</li>
          </ul>
        </v-tab-item>
        <v-tab-item>
          <ul class="history-content">
            <li>Created by 2020-09-24 14:08:30</li>
            <li>Created by 2020-09-23 14:18:54</li>
            <li>Created by 2020-09-20 10:05:03</li>
          </ul>
        </v-tab-item>
        <v-tab-item>
          <table class="table form-table approver-table">
            <thead>
            <th><span>Name</span></th>
            <th><span>Grade</span></th>
            <th><span>Status</span></th>
            </thead>
            <tbody>
            <tr>
              <td></td>
              <td></td>
              <td>Approved at 2020-09-24 14:08:30</td>
            </tr>
            </tbody>
          </table>
        </v-tab-item>
      </v-tabs>

    </v-layout>

  </div>
</template>

<script lang="ts">
  import Vue from "vue";
  import {Component} from "vue-property-decorator";
  import {
    DeleteTravelAllowanceDetail,
    GetTerritoryList,
    GetTraveAllowanceDetail,
    PutTravelAllowanceDetail,
    SaveTravelAllowanceDetail
  } from "@/request/index";
  import {
    travelallowanceDetailHeard,
    travelallowanceDetailSelect,
    travelallowanceDetailStaffInfo,
    travelallowanceDetailValue
  } from "@/pagetypes";

  @Component({})
  export default class APP extends Vue {
    travelAllowance: travelallowanceDetailStaffInfo = {};
    isActive: boolean = true;
    checkbox: boolean = true;
    page: number = 1;
    dialog: boolean = false;
    selectFileDialog: boolean = false;
    territoryList: travelallowanceDetailSelect[] = [];
    provinceList: travelallowanceDetailSelect[] = [];
    cityList: travelallowanceDetailSelect[] = [];
    headers: travelallowanceDetailHeard[] = [
      {text: "", value: "add", class: "cursor"},
      {text: "Line No.", value: "lineNo"},
      {text: "Territory", value: "territory"},
      {text: "Province", value: "province"},
      {text: "Accomodation city", value: "accomodationCity"},
      {text: "Hotel name", value: "hotelName"},
      {text: "Check-in date (DD/MM/YYYY)", value: "checkInDate"},
      {text: "Check-out date (DD/MM/YYYY)", value: "checkOutDate"},
      {text: "No. of nights", value: "noOfNights"},
      {text: "Daily travel allowance amount (RMB)", value: "dailyAmount"},
      {text: "Total travel allowance amount (RMB)", value: "totalAmount"},
    ];
    desserts: travelallowanceDetailValue[] = [];
    checkOutDate = null;
    checkInDate = null;
    hotelName: string = "";
    accomodationCity: string = "";
    province: string = "";
    territory: string = "";

    // @Watch('territory')
    // onTerritoryChanged(val: string): void {
    //   alert(val)
    // }

    async mounted() {
      var res = await GetTraveAllowanceDetail(this.$route.params.id)
      if (res.data) {
        this.travelAllowance = res.data.travelAllowance;
        if (
          res.data.travelAllowanceDetails != null &&
          res.data.travelAllowanceDetails.length > 0
        ) {
          res.data.travelAllowanceDetails.filter((x: any) => {
            x.checkInDate.indexOf("0001-01-01") > -1
              ? (x.checkInDate = null)
              : (x.checkInDate = this.$options.filters["formattingDate"](
              x.checkInDate
              ));
            x.checkOutDate.indexOf("0001-01-01") > -1
              ? (x.checkOutDate = null)
              : (x.checkOutDate = this.$options.filters["formattingDate"](
              x.checkOutDate
              ));


          });
          res.data.travelAllowanceDetails.forEach(
            (x: travelallowanceDetailValue, index: number) => {
              x.lineNo = index + 1;
              if (x.territory == 'Mainland China')
                x.readonlyProvince = true
              else
                x.readonlyProvince = false

            }
          );
          this.desserts = res.data.travelAllowanceDetails;
        }
      }
      var territoryResult = await GetTerritoryList()
      if (territoryResult.data) {
        territoryResult.data.forEach((x: any) => {
          this.territoryList.push({Id: x.name, Name: x.nameCN});
        })
      }
    }

    DeleteLine(item: travelallowanceDetailValue) {
      this.desserts.splice(this.desserts.indexOf(item), 1);
      this.desserts.forEach((x: travelallowanceDetailValue, i: number) => {
        x.lineNo = i + 1;
      });
      DeleteTravelAllowanceDetail(item).then((res: any) => {
        if (res.data) {
          this.$message.success("delete success");
        }
      });
    }

    AddNewLine() {
      let newModel: travelallowanceDetailValue = {};
      this.headers.forEach((x) => {
        newModel[x["value"]] = null;
      });
      if (this.desserts.length == 0) newModel.lineNo = 1;
      else newModel.lineNo = this.desserts[this.desserts.length - 1].lineNo + 1;
      newModel.travelAllowanceId = this.$route.params.id;
      this.desserts.push(newModel);
      SaveTravelAllowanceDetail(newModel).then((res) => {
        if (res.data != "") newModel.travelAllowanceDetailId = res.data;
      });
    }

    open(item: any) {
      if (item.value != null) {
        if (item.header.value == "checkInDate")
          item.item.checkInDate = item.item.checkInDate
            .split("/")
            .reverse()
            .join("-");
        else if ((item.header.value = "checkOutDate"))
          item.item.checkOutDate = item.item.checkOutDate
            .split("/")
            .reverse()
            .join("-");
      }
    }

    close(item: any) {
      var model: string = JSON.stringify(item.item);
      var currentMode: travelallowanceDetailValue = JSON.parse(model);
      if (currentMode.checkOutDate != null)
        currentMode.checkOutDate = currentMode.checkOutDate
          .split("/")
          .reverse()
          .join("-");
      if (currentMode.checkInDate != null)
        currentMode.checkInDate = currentMode.checkInDate
          .split("/")
          .reverse()
          .join("-");
      PutTravelAllowanceDetail(currentMode).then((res: any) => console.log(res));
      if (currentMode.territory == "Mainland China") {
        item.item.readonlyProvince = true;
      } else {
        item.item.readonlyProvince = false;
      }
    }

    inputFile() {
      this.$refs.uploadFile.dispatchEvent(new MouseEvent("click"));
    }

    file() {
      const file = this.$refs.uploadFile.files;
      const data = new FormData();
      data.append("id", "234sfd");
      if (file.length > 0) {
        file.forEach((x: any) => {
          data.append("file", x);
        });
      }

      // UploadFile(data)
    }
  }
</script>
